@import "../_mixin";


.promotion{
  background-image: url(../../../assets/images/promotion/nationalday/nationalday-bg.jpg);
  background-repeat: y-repeat;
  background-attachment:fixed;
  background-size:100%;

  .section1{
      position:relative;
      background-image: url(../../../assets/images/promotion/nationalday/nationalday-text.png);
      background-size:85%;
      background-position:center center;
      background-repeat:no-repeat;
      min-height:220px;
      img{
        width:85%;
        opacity:0;
        padding:0.5rem 0rem;
      }
  }

  .section2{
      position:relative;
      background-image: url(../../../assets/images/promotion/nationalday/nationalday-item1.png);
      background-size:96%;
      background-position:center center;
      background-repeat:no-repeat;
      img{
        width:100%;
        opacity:0;
      }

      a{
        left: 50%;

        width:4.6rem;
        margin-left:-2.3rem;
        bottom:5%;
        position:absolute;
        background-image: url(../../../assets/images/promotion/nationalday/nationalday-btn.png);
        background-size:100%;
        background-repeat:no-repeat;
        z-index:10;
      }
  }

  .process{
    position: absolute;
    display: block;
    width: 3.1%;
    top: 19.8%;
    left: 19.4%;
    height: 63%;
    border-radius: 10px;
    //background: red;
    i {
      top: 38px;
      padding:85%;
      display: block;
      border-radius: 50%;
      position: absolute;
      transition-property: all;
      transition-duration: .5s;
      left: -38%;
      background: #edb800;
      background: -webkit-linear-gradient(left, #faea00, #e8a300);
      background: -o-linear-gradient(left, #faea00, #e8a300);
      background: -moz-linear-gradient(left, #faea00, #e8a300);
      background: linear-gradient(to right, #faea00, #e8a300);
      z-index:10;
      opacity:0;
      &.on{
        opacity:1;
      }
    }

    .ddt1 {
        top: 88.8%;
    }

    .ddt2 {
        top: 61.5%;
    }

    .ddt3 {
        top: 34.3%;
    }

    .ddt4 {
        top: 6.95%;
    }



    em{
      position:absolute;
      width:100%;
      bottom:0;
      display:block;
      border-radius:10px;
      background: #edb800;
      background: -webkit-linear-gradient(left, #faea00, #e8a300);
      background: -o-linear-gradient(left, #faea00, #e8a300);
      background: -moz-linear-gradient(left, #faea00, #e8a300);
      background: linear-gradient(to right, #faea00, #e8a300);
      transition-property: all;
      transition-duration: 1s;
    }



    .note{
        transition: all 1.5s;
        opacity: 0;
        position: absolute;
        min-width: 120px;
        height:66px;
        padding: 0.2rem;
        font-size: 16px;
        border-radius: 5px;
        background: #fff;
        margin-left: -60px;

        top:100%;
        color: #4d4d4d;
        box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.4);

        z-index:12;
        &:after{
            content: ' ';
            width: 0px;
            height: 0px;
            line-height: 0px;
            border-width: 0px 15px 15px 15px;
            border-style: dashed solid solid solid;
            border-left-color: transparent;
            border-right-color: transparent;
            position: absolute;
            border-bottom-color: #fff;
            left: 50%;
            /* bottom: -10px; */
            top: -12px;
            margin-left: -11px;
            z-index:98;
        }

    }





  }

  .section3{
      position:relative;
      background-image: url(../../../assets/images/promotion/nationalday/nationalday-item2.png);
      background-size:96%;
      background-position:center center;
      background-repeat:no-repeat;
      min-height:220px;
      img{
        width:96%;
        opacity:0;
        padding:0.5rem 0rem;
      }
  }

  .section4{
    width:93%;
    margin:auto;
    @include fz(16px);
    color:#fff;
    padding-bottom:0.4rem;
    opacity:0.95;
    p{
      margin-bottom:0.3rem;
    }
  }

}





